/*
 * @Author: yangrongxin
 * @Date: 2021-08-04 11:38:22
 * @LastEditors: liubin
 * @LastEditTime: 2021-10-20 09:52:10
 */
import { View, Image, Text, OpenData } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { isLoginFn, loginWithFn } from '@/utils/common';
import { AtIcon } from 'taro-ui';
import styles from './index.module.less';

/*
 * 心理面板中每个元素item
 */
const UserInfoCardItem = (props: {
  title: string; // 对应标题名称
  value: number; // 对应展示值
  isHeart?: boolean; // 对应是否展示红心
  isWarning?: boolean; // 对应是否心理预警
}) => {
  const { title, value, isHeart = false, isWarning = false } = props;
  return (
    <View className={styles.dataPanelItem}>
      <View>
        <Text>{title}</Text>
        {isHeart && <AtIcon prefixClass="icon" value="heart-fill" color="#FF5F2D" size="12" />}
      </View>
      <View className={isWarning ? styles.warnItem : ''}>
        <Text>{value}</Text>
        {isWarning && (
          <View>
            <View></View>
            <View>
              <Text>心理预警</Text>
            </View>
          </View>
        )}
      </View>
    </View>
  );
};

/*
  {
    heartIndex: number; // 心晴指数
    heartReportTotal: number; // 心理报告
    orderTotal: number; // 订单总数
    userInfo: {
      contactMobile: string; // 联系电话
      headPortrait: string; // 头像地址
      name: string; // 姓名
      credNo: string; // 身份张号码
    };
  }
 */
const UserInfoCard = (props: any) => {
  const {
    userInfo: { name = '欢迎您，游客', credNo = '', contactMobile = '' } = {},
    waitSuccessEvaluation = 0, // 待完成测评数量
    evaluationSuccessTotal = 0, // 已测评数量
    articleTotal = 0, // 已购宣教数量
  } = props;

  // 获取当前用户的登录状态
  const isLogin = isLoginFn();
  return (
    <View className={styles.container}>
      <View className={styles.content}>
        {/* 展示用户信息 */}
        <View className={styles.userInfo} onClick={loginWithFn}>
          <View className={styles.userAvatar}>
            {isLogin ? (
              <OpenData type="userAvatarUrl" />
            ) : (
              <Image src="https://hxgywx.oss-cn-shenzhen.aliyuncs.com/hxt-wxminiprogram/avatar_none.png" />
            )}
          </View>
          {/* <Image
            src={headPortrait}
          /> */}
          <View className={`${styles.userInfoContent} ${isLogin ? '' : styles.center}`}>
            <View>
              {isLogin ? <Text>{name || contactMobile}</Text> : <Text className={styles.center}>您好，请登录</Text>}
              {isLogin ? (
                <View
                  onClick={() => {
                    // 跳转到当前用户编辑个人资料页面
                    Taro.navigateTo({
                      url: `/pages/My/compoents/MyData/index?phone=${contactMobile}`,
                    });
                  }}
                >
                  <AtIcon prefixClass="icon" value="edit-fill" size="14" />
                </View>
              ) : null}
            </View>
            {isLogin ? <Text>{credNo || contactMobile}</Text> : null}
          </View>
        </View>
        {/* 展示心晴指数以及相关数据 */}
        <View className={styles.dataPanel}>
          <UserInfoCardItem title="待测评" value={waitSuccessEvaluation} />
          <View className={styles.borderLine}></View>
          <UserInfoCardItem title="已测评" value={evaluationSuccessTotal} />
          <View className={styles.borderLine}></View>
          <UserInfoCardItem title="已购宣教" value={articleTotal} />
        </View>
      </View>
    </View>
  );
};

export default UserInfoCard;
